<template>
	<view>
		<view style="margin-left: 20rpx;">
			<view class="form-box">
				<view class="form-item flex-col">
					<!-- pics -->
					<view class="f1">项目图片</view>
					<view class="f2" style="flex-wrap:wrap">
						<view v-for="(item, index) in pics" :key="index" class="layui-imgbox">
							<view class="layui-imgbox-close" @tap="removeimg" :data-index="index" data-field="pics">
								<image style="display:block" src="/static/img/ico-del.png"></image>
							</view>
							<view class="layui-imgbox-img">
								<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
							</view>
						</view>
						<view class="uploadbtn"
							:style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
							@tap="uploadimg" data-field="pics" data-pernum="9" v-if="pics.length<5"></view>
					</view>
					<input type="text" hidden="true" name="pics" v-model="pics.join(',')" maxlength="-1"></input>
				</view>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">项目名称</text>
				<input placeholder="请输入" v-model="info.project_name" class="text_6"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">项目地点</text>
				<input placeholder="请输入" v-model="info.location" class="text_6"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">小主姓名</text>
				<input placeholder="请输入" v-model="info.name" class="text_6"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">星级</text>
				<input placeholder="请输入" class="text_6"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">手机</text>
				<input placeholder="请输入" v-model="info.phone" class="text_6"></input>
			</view>
			<view class="group_6">
				<view class="text-group_4">
					<text lines="1" class="text_5">项目概述</text>
					<textarea placeholder="请输入" v-model="info.project_summary" :auto-height="true"
						class="margin-top"></textarea>
				</view>
			</view>
			<view class="group_6">
				<view class="text-group_4">
					<text lines="1" class="text_5">项目需求</text>
					<textarea placeholder="请输入" v-model="info.project_demand" :auto-height="true"
						class="margin-top"></textarea>
				</view>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">发布时长</text>
				<input placeholder="请输入" v-model="info.publish_duration" class="text_6"></input>
			</view>
		</view>
		<view class="text-center" style="margin-top:200rpx;">
			<button class="cu-btn lg round" style="width: 80%;background: #994278;color: #FFFFFF;"
				@click="submit">提交发布</button>
		</view>

	</view>
</template>

<script>

	var app = getApp();
	export default {
		data() {
			return {
				info: {},
				pics: [],
				pre_url: app.globalData.pre_url,
			}
		},
		methods: {
			removeimg: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index
				var field = e.currentTarget.dataset.field
				if (field == 'pics') {
					var pics = that.pics
					pics.splice(index, 1);
					that.pics = pics;
				}
			},
			uploadimg: function(e) {
				var that = this;
				var pernum = parseInt(e.currentTarget.dataset.pernum);
				if (!pernum) pernum = 1;
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				if (!pics) pics = [];
				app.chooseImage(function(urls) {
					for (var i = 0; i < urls.length; i++) {
						pics.push(urls[i]);
					}
					if (field == 'pics') that.pics = pics;
				}, pernum);
			},
			uploadbgpic: function() {
				var that = this;
				var bglist = this.bglist;
				if (bglist.length > 0) {
					uni.showActionSheet({
						itemList: ['选择系统背景', '自己上传背景（700×480像素）'],
						success: function(res) {
							console.log(res.tapIndex)
							if (res.tapIndex == 0) {
								that.bglistshow = true;
							} else {
								that.uploadimg({
									currentTarget: {
										dataset: {
											field: "bgpic",
											pernum: "1"
										}
									}
								});
							}
						}
					});
				} else {
					that.uploadimg({
						currentTarget: {
							dataset: {
								field: "bgpic",
								pernum: "1"
							}
						}
					});
				}
			},
			submit() {
				var that = this
				that.info.project_img = that.pics
				console.log(that.info)
				app.post('ApiProjectPublish/addproject', {
					info: that.info,
				}, function(res) {
					if (res.status == 0) {
						app.error(res.msg);
					} else {
						app.success(res.msg);
						setTimeout(function() {
							app.goto('index', 'redirect');
						}, 1000);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 2rpx 24rpx 0 24rpx;
		background: #fff;
		margin: 24rpx;
		border-radius: 10rpx
	}

	.form-item {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 0px solid #eee
	}

	.form-item .f1 {
		color: #222;
		width: 250rpx;
		flex-shrink: 0;
	}

	.form-item .f2 {
		display: flex;
		align-items: center;
		flex: 1
	}

	.form-box .form-item:last-child {
		border: none
	}

	.form-box .flex-col {
		padding-bottom: 20rpx
	}

	.form-item input {
		width: 100%;
		border: 1px solid #f1f1f1;
		color: #111;
		font-size: 28rpx;
		/*text-align: right;*/
		height: 70rpx;
		padding: 0 10rpx;
		border-radius: 6rpx
	}

	.form-item textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx 0;
		border: none;
	}

	.form-item .upload_pic {
		margin: 50rpx 0;
		background: #F3F3F3;
		width: 90rpx;
		height: 90rpx;
		text-align: center
	}

	.form-item .upload_pic image {
		width: 32rpx;
		height: 32rpx;
	}

	.uploadbtn {
		position: relative;
		height: 200rpx;
		width: 200rpx
	}

	.group_5 {
		background-color: rgba(213, 179, 200, 1.000000);
		border-radius: 30rpx;
		width: 710rpx;
		align-self: center;
		margin-top: 8rpx;
		display: flex;
		flex-direction: row;
		padding: 78rpx 242rpx 78rpx 244rpx;
	}

	.image-text_3 {
		display: flex;
		flex-direction: column;
	}

	.image_3 {
		width: 100rpx;
		height: 100rpx;
		align-self: center;
	}

	.text-group_1 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		white-space: nowrap;
		line-height: 44rpx;
		margin-top: 20rpx;
	}


	.text-wrapper_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 30rpx;
		width: 710rpx;
		align-self: center;
		margin-top: 20rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx 30rpx 30rpx;
	}

	.text_5 {
		overflow-wrap: break-word;
		color: rgba(142, 142, 142, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.text_6 {
		overflow-wrap: break-word;
		color: rgba(181, 181, 181, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 44rpx;
	}


	.group_6 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 30rpx;
		width: 710rpx;
		align-self: center;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		padding: 30rpx 552rpx 30rpx 30rpx;
	}

	.text-group_4 {
		display: flex;
		flex-direction: column;
	}
</style>